<!--
 * @Author: early-autumn
 * @Date: 2020-05-21 10:17:34
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-05-29 18:40:08
-->
<template>
  <el-card class="basic-information" shadow="never">
    <div slot="header" class="basic-information__header">基本信息</div>
    <el-form label-width="68px" inline size="small">
      <el-form-item label="预约日期">
        <el-date-picker
          :value="date"
          style="width: 200px"
          :picker-options="pickerOptions"
          type="date"
          :editable="false"
          :clearable="false"
          @input="handleDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="持续时间">
        <el-input-number
          :value="duration"
          :min="15"
          :max="780"
          :step="15"
          @change="handleDuration"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-if="market" label="洁牙师">
        <el-select
          :value="doctorId"
          placeholder="请选择洁牙师"
          @change="handleDoctorId"
        >
          <el-option
            v-for="doctor in doctorOptions"
            :key="doctor.userId"
            :label="doctor.userName"
            :value="doctor.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-else label="医生">
        <el-select
          :value="doctorId"
          placeholder="请选择医生"
          @change="handleDoctorId"
        >
          <el-option
            v-for="doctor in doctorOptions"
            :key="doctor.userId"
            :label="doctor.userName"
            :value="doctor.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="!market" label="TC">
        <el-select :value="tcId" placeholder="请选择TC" @change="handleTcId">
          <el-option
            v-for="tc in tcOptions"
            :key="tc.userId"
            :label="tc.userName"
            :value="tc.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          :value="remarks"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入备注"
          @input="handleRemarks"
        ></el-input>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import { listStaff } from '@/api/services/common'
import { entityOptions } from '@/utils/options'

export default {
  name: 'BasicInformation',
  props: {
    doctorOptions: {
      type: Array,
      default: () => [],
    },
    date: {
      type: String,
      default: undefined,
    },
    duration: {
      type: Number,
      default: 15,
    },
    doctorId: {
      type: Number,
      default: undefined,
    },
    doctorName: {
      type: String,
      default: undefined,
    },
    tcId: {
      type: Number,
      default: undefined,
    },
    tcName: {
      type: String,
      default: undefined,
    },
    remarks: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {
      tcOptions: [],
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      market: false,
    }
  },
  computed: {
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
    entityOptions() {
      return entityOptions
    },
  },
  mounted() {
    this.getListStaff()
    if (this.$route.path == '/market/marketView') {
      this.market = true
    }
  },
  methods: {
    /**
     * 获取TC列表
     */
    async getListStaff() {
      const { data } = await listStaff({
        deptId: +this.clinicId,
        postname: 'TC',
      })
      this.tcOptions = data
    },
    handleDate(e) {
      this.$emit('update:doctorId', undefined)
      this.$emit('update:date', dayjs(e).format('YYYY-MM-DD'))
    },
    handleDuration(e) {
      this.$emit('update:duration', e)
    },
    handleDoctorId(e) {
      this.$emit('update:doctorId', e)
      this.doctorOptions.forEach((doctor) => {
        if (doctor.userId === e) {
          this.$emit('update:doctorName', doctor.userName)
        }
      })
    },
    handleTcId(e) {
      this.$emit('update:tcId', e)
      this.tcOptions.forEach((tc) => {
        if (tc.userId === e) {
          this.$emit('update:tcName', tc.userName)
        }
      })
    },
    handleRemarks(e) {
      this.$emit('update:remarks', e)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic-information {
  width: 100%;
  height: 500px;

  .basic-information__header {
    margin-bottom: 3px;
  }
}
</style>
